<template>
  <div id="app">
    <!-- <van-tabbar
      v-if="$route.meta.hideNav"
      route
      active-color="#fc4141"
      inactive-color="#282828"
      style="z-index: 1000"
    > -->
      <van-tabbar
      route
      active-color="#fc4141"
      inactive-color="#282828"
      style="z-index: 1000"
    >
      <van-tabbar-item to="/" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/category" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item to="/my" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
    <div
      class="xuanFu"
      @touchstart.stop.prevent="xuanfuStart"
      @touchmove.stop.prevent="xuanfuMove"
      @touchend.stop.prevent="xuanfuEnd"
      :style="{ top: movingY + 'px' }"
    >
      <div class="option" v-show="open">
        <div @touchstart="toHome">
          <van-icon name="wap-home-o" color="white" size="1.6rem"></van-icon>
        </div>
        <div @touchstart="toCart">
          <van-icon
            name="shopping-cart-o"
            color="white"
            size="1.6rem"
          ></van-icon>
        </div>
        <div @touchstart="toMy">
          <van-icon name="user-o" color="white" size="1.6rem"></van-icon>
        </div>
        <div @touchstart="toReturn">
          <van-icon name="revoke" color="white" size="1.6rem" />
        </div>
      </div>
      <div class="ball">
        <img v-show="!open" src="./assets/open.gif" alt="" />
        <img v-show="open" src="./assets/close.gif" alt="" />
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      movingY: 540,
      clickBallHeight: 0,
      open: false,
      moveBol: false,
    };
  },
  created() {},
  methods: {
    toHome() {
      this.$router.push("/");
    },
    toCart() {
      this.$router.push("/cart");
    },
    toMy() {
      this.$router.push("/my");
    },
    toReturn(){
      this.$router.go(-1);
    },
    xuanfuStart(e) {
      this.clickBallHeight = e.targetTouches[0].clientY - this.movingY;
    },
    xuanfuMove(e) {
      this.moveBol = true;
      this.movingY = e.targetTouches[0].clientY - this.clickBallHeight;
      if (this.movingY < 100) {
        this.movingY = 100;
      } else if (this.movingY > 540) {
        this.movingY = 540;
      }
    },
    xuanfuEnd() {
      if (!this.moveBol) {
        this.open = !this.open;
      }
      this.moveBol = false;
    },
  },
};
</script>

<style lang="less">
#app {
  .xuanFu {
    height: 2.8rem;
    position: fixed;
    right: 1rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    .ball {
      width: 2.8rem;
      height: 2.8rem;
      transform: rotate(90deg);
      img {
        height: 100%;
      }
    }
    .option {
      height: 2.7rem;
      width: 10rem;
      background-color: #f44939;
      border-radius: 2rem;
      margin-right: 0.8rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      a {
        width: 25%;
        text-align: center;
        height: 100%;
        line-height: 3.5rem;
      }
      .van-icon {
        width: 100%;
      }
    }
  }
}
</style>
